<template>
  <div class="topic-management">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="关键词">
            <el-input v-model="searchForm.keyWords" placeholder="请输入关键词" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.category_id" placeholder="请选择分类" clearable>
              <el-option v-for="(label, value) in categoryOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="全部" value="" />
              <el-option v-for="(label, value) in statusOptions" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item label="可见性">
            <el-select v-model="searchForm.visibility" placeholder="请选择可见性" clearable>
              <el-option label="全部" :value="0" />
              <el-option label="公开" :value="1" />
              <el-option label="匿名" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button
              type="success"
              :disabled="selectedTopics.length === 0"
              @click="openBatchReviewDialog"
            >批量审核 ({{ selectedTopics.length }})</el-button>
            <el-button
              type="danger"
              :disabled="selectedTopics.length === 0"
              @click="confirmBatchDelete"
            >批量删除 ({{ selectedTopics.length }})</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 话题列表 -->
    <div class="topic-list">
      <el-card>
        <div slot="header">
          <span>话题列表</span>
        </div>

        <el-table
          v-loading="loading"
          :data="topicList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="48" />
          <el-table-column prop="title" label="标题" width="220" show-overflow-tooltip />
          <el-table-column prop="image" label="封面" width="120">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.image"
                style="width: 100px; height: 60px"
                :src="scope.row.image"
                fit="cover"
                :preview-src-list="[scope.row.image]"
              />
              <span v-else>无封面</span>
            </template>
          </el-table-column>
          <el-table-column prop="authorName" label="作者" width="120" show-overflow-tooltip />
          <el-table-column prop="categoryId" label="分类" width="120" align="center">
            <template slot-scope="scope">
              <el-tag :type="getCategoryTagType(scope.row.categoryId)" size="mini">
                {{ getCategoryLabel(scope.row.categoryId) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="visibility" label="可见性" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getVisibilityTagType(scope.row.visibility)">
                {{ getVisibilityLabel(scope.row.visibility) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusLabel(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="views" label="浏览量" width="80" align="center" />
          <el-table-column prop="likeCount" label="点赞" width="80" align="center" />
          <el-table-column prop="commentCount" label="评论" width="80" align="center" />
          <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
          <el-table-column label="操作" width="220" fixed="right" align="left">
            <template slot-scope="scope">
              <div class="action-buttons-row">
                <el-button size="mini" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
                <el-button size="mini" type="warning" @click="openStatusDialog(scope.row)">修改状态</el-button>
                <el-button size="mini" type="success" plain @click="openConciseDialog(scope.row)">概括</el-button>
                <el-button size="mini" type="danger" @click="handleDeleteSingle(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 话题详情对话框 -->
    <el-dialog :visible.sync="detailVisible" title="话题详情" width="60%">
      <div v-if="topicDetail" class="topic-detail">
        <div class="detail-header">
          <h2>{{ topicDetail.title }}</h2>
        </div>
        
        <div class="detail-image" v-if="topicDetail.image">
          <el-image
            :src="topicDetail.image"
            fit="cover"
            style="width: 100%; max-height: 300px;"
            :preview-src-list="[topicDetail.image]"
          />
        </div>

        <div class="detail-info">
          <div class="info-row">
            <span class="info-label">话题ID：</span>
            <span class="info-value">{{ topicDetail.topicId }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">作者：</span>
            <span class="info-value">{{ topicDetail.authorName }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">标签：</span>
            <span class="info-value">
              <el-tag
                v-if="topicDetail.categoryId"
                :type="getCategoryTagType(topicDetail.categoryId)"
                size="mini"
                style="margin-right: 6px;"
              >
                {{ getCategoryLabel(topicDetail.categoryId) }}
              </el-tag>
              <el-tag
                v-for="tag in (topicDetail.tags || [])"
                :key="tag"
                size="mini"
                style="margin-right: 4px;"
              >
                {{ tag }}
              </el-tag>
            </span>
          </div>
          <div class="info-row">
            <span class="info-label">可见性：</span>
            <el-tag :type="getVisibilityTagType(topicDetail.visibility)">
              {{ getVisibilityLabel(topicDetail.visibility) }}
            </el-tag>
          </div>
          <div class="info-row">
            <span class="info-label">状态：</span>
            <el-tag :type="getStatusTagType(topicDetail.status)">
              {{ getStatusLabel(topicDetail.status) }}
            </el-tag>
          </div>
          <div class="info-row">
            <span class="info-label">浏览量：</span>
            <span class="info-value">{{ topicDetail.views }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">点赞数：</span>
            <span class="info-value">{{ topicDetail.likeCount }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">收藏数：</span>
            <span class="info-value">{{ topicDetail.favoriteCount }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">评论数：</span>
            <span class="info-value">{{ topicDetail.commentCount }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">创建时间：</span>
            <span class="info-value">{{ topicDetail.createTime }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">更新时间：</span>
            <span class="info-value">{{ topicDetail.updateTime }}</span>
          </div>
        </div>

        <div class="detail-content" v-if="topicDetail.contentSummary">
          <h3>内容摘要</h3>
          <p>{{ topicDetail.contentSummary }}</p>
        </div>
        <div class="detail-content" v-if="topicDetail.content">
          <h3>内容</h3>
          <div class="content-text" v-html="formatContent(topicDetail.content)" />
        </div>
      </div>
    </el-dialog>

    <!-- 修改状态对话框 -->
    <el-dialog :visible.sync="statusDialog.visible" title="修改话题状态" width="500px">
      <el-form :model="statusDialog.form" label-width="100px" :rules="statusDialog.rules" ref="statusForm">
        <el-form-item label="话题ID">
          <span>{{ statusDialog.form.id }}</span>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-tag :type="getStatusTagType(statusDialog.form.currentStatus)">
            {{ getStatusLabel(statusDialog.form.currentStatus) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="新状态" prop="status">
          <el-select v-model="statusDialog.form.status" placeholder="请选择新状态" style="width: 100%">
            <el-option
              v-for="opt in allowedStatusOptions"
              :key="opt.label + '-' + opt.value"
              :label="opt.label"
              :value="String(opt.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核信息" prop="reviewMessage">
          <el-input type="textarea" v-model="statusDialog.form.reviewMessage" :rows="3" maxlength="200" show-word-limit placeholder="请输入审核备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statusDialog.visible = false">取 消</el-button>
        <el-button type="primary" :loading="statusDialog.submitting" @click="submitStatus">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 精简内容对话框 -->
    <el-dialog :visible.sync="conciseDialog.visible" title="话题精简内容" width="600px">
      <div v-loading="conciseDialog.loading">
        <el-alert v-if="!conciseDialog.content" title="无精简内容或请点击获取" type="info" :closable="false" show-icon />
        <el-input
          v-else
          type="textarea"
          :rows="8"
          v-model="conciseDialog.content"
          readonly
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="conciseDialog.visible = false">关 闭</el-button>
        <el-button type="primary" :loading="conciseDialog.loading" @click="fetchConciseContent">获取/刷新</el-button>
        <el-button type="success" @click="copyConcise">复制内容</el-button>
      </div>
    </el-dialog>

    <!-- 批量审核对话框 -->
    <el-dialog :visible.sync="batchReviewDialog.visible" title="批量审核话题" width="500px">
      <el-form :model="batchReviewDialog.form" label-width="100px" :rules="batchReviewDialog.rules" ref="batchReviewForm">
        <el-form-item label="选中数量">
          <span>{{ selectedTopics.length }} 条话题</span>
        </el-form-item>
        <el-form-item label="审核状态" prop="status">
          <el-select v-model="batchReviewDialog.form.status" placeholder="请选择审核状态" style="width: 100%">
            <el-option label="审核通过" :value="2" />
            <el-option label="审核不通过" :value="5" />
            <el-option label="封禁" :value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核信息" prop="reviewMessage">
          <el-input type="textarea" v-model="batchReviewDialog.form.reviewMessage" :rows="3" maxlength="200" show-word-limit placeholder="请输入审核备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchReviewDialog.visible = false">取 消</el-button>
        <el-button type="primary" :loading="batchReviewDialog.submitting" @click="submitBatchReview">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getTopicList, 
  getCategoryList, 
  statusMap, 
  visibilityMap,
  createCategoryMap,
  getStatusTagType,
  getVisibilityTagType,
  getCategoryTagType
} from '@/api/topic'
import { updateTopicStatus, getTopicDetail, getTopicConciseContent, deleteTopics } from '@/api/topic'

export default {
  name: 'TopicManagement',
  data() {
    return {
      loading: false,
      detailVisible: false,
      topicList: [],
      topicDetail: null,
      categoryList: [],
      total: 0,
      selectedTopics: [],
      searchForm: {
        page: 1,
        pageSize: 10,
        category_id: 0,
        keyWords: '',
        status: '',
        visibility: 0
      },
      statusDialog: {
        visible: false,
        submitting: false,
        form: {
          id: '',
          currentStatus: '',
          status: '',
          reviewMessage: ''
        },
        rules: {
          status: [{ required: true, message: '请选择新状态', trigger: 'change' }],
          reviewMessage: [{ required: true, message: '请输入审核信息', trigger: 'blur' }]
        }
      },
      batchReviewDialog: {
        visible: false,
        submitting: false,
        form: {
          status: '',
          reviewMessage: ''
        },
        rules: {
          status: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
          reviewMessage: [{ required: true, message: '请输入审核信息', trigger: 'blur' }]
        }
      },
      conciseDialog: {
        visible: false,
        loading: false,
        topicId: '',
        content: ''
      }
    }
  },
  computed: {
    categoryOptions() {
      return createCategoryMap(this.categoryList)
    },
    statusOptions() {
      return statusMap
    },
    // 仅允许：封禁(6)、审核通过(2)、删除(7)、发布(2)
    allowedStatusOptions() {
      return [
        { value: 6, label: '封禁' },
        { value: 2, label: '审核通过' },
        { value: 5, label: '审核不通过' },
        { value: 2, label: '发布' }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.loadCategories()
      this.fetchList()
    },
    async loadCategories() {
      try {
        const res = await getCategoryList()
        if (res?.code === 1) {
          this.categoryList = res.data || []
        }
      } catch (e) {
        console.error('获取分类列表失败:', e)
        this.categoryList = []
      }
    },
    async fetchList() {
      this.loading = true
      try {
        const res = await getTopicList(this.searchForm)
        if (res?.code === 1) {
          // 列表数据：兼容 data 为数组或对象(records)
          const list = Array.isArray(res?.data) ? res.data : (res?.data?.records || [])
          this.topicList = list

          // 总数：尽量从返回的 map 或 data 中取总数，缺省再回退为当前页长度
          const totalFromMap = res?.map && (res.map.total ?? res.map.count ?? res.map.totalCount)
          const totalFromData = res?.data && (res.data.total ?? res.data.count ?? res.data.totalCount)
          const totalFromRoot = typeof res?.total === 'number' ? res.total : undefined
          const totalCandidate = totalFromMap ?? totalFromData ?? totalFromRoot
          if (typeof totalCandidate === 'number') {
            this.total = totalCandidate
          } else {
            const currentPageIndex = Number(this.searchForm.page) || 1
            const pageSize = Number(this.searchForm.pageSize) || 10
            const hasNextLikely = list.length >= pageSize
            // 若没有总数，启用“乐观总数”策略：
            // - 满页：认为至少还有下一页，使“下一页”可点
            // - 非满页：认为已到最后一页
            this.total = hasNextLikely
              ? (currentPageIndex + 1) * pageSize
              : (currentPageIndex - 1) * pageSize + list.length
          }
        }
      } catch (error) {
        console.error('获取话题列表失败:', error)
        this.topicList = []
        this.total = 0
      } finally {
        this.loading = false
      }
    },
    handleSelectionChange(selection) {
      this.selectedTopics = selection
    },
    handleSearch() {
      this.searchForm.page = 1
      this.fetchList()
    },
    handleReset() {
      this.searchForm = { page: 1, pageSize: 10, category_id: 0, keyWords: '', status: '', visibility: 0 }
      this.fetchList()
    },
    handleCurrentChange(page) {
      this.searchForm.page = page
      this.fetchList()
    },
    handleSizeChange(size) {
      this.searchForm.pageSize = size
      this.searchForm.page = 1
      this.fetchList()
    },
    async viewDetail(row) {
      try {
        this.loading = true
        const id = row.topicId || row.id
        const res = await getTopicDetail(id)
        if (res?.code === 1) {
          this.topicDetail = res.data || null
          this.detailVisible = true
        }
      } catch (e) {
        console.error('获取话题详情失败:', e)
      } finally {
        this.loading = false
      }
    },
    openStatusDialog(row) {
      this.statusDialog.form = {
        id: row.topicId || row.id || '',
        currentStatus: row.status,
        status: String(row.status),
        reviewMessage: ''
      }
      this.statusDialog.visible = true
    },
    openBatchReviewDialog() {
      this.batchReviewDialog = {
        visible: true,
        submitting: false,
        form: {
          status: '',
          reviewMessage: ''
        },
        rules: {
          status: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
          reviewMessage: [{ required: true, message: '请输入审核信息', trigger: 'blur' }]
        }
      }
    },
    async submitBatchReview() {
      this.$refs.batchReviewForm.validate(async (valid) => {
        if (!valid) return
        try {
          this.batchReviewDialog.submitting = true
          const ids = this.selectedTopics.map(item => item.topicId || item.id)
          const promises = ids.map(id => updateTopicStatus({
            id,
            reviewMessage: this.batchReviewDialog.form.reviewMessage,
            status: parseInt(this.batchReviewDialog.form.status)
          }))
          await Promise.all(promises)
          this.$message.success(`成功审核 ${ids.length} 条话题`)
          this.batchReviewDialog.visible = false
          this.selectedTopics = []
          this.fetchList()
        } catch (e) {
          // 错误信息由统一请求处理
        } finally {
          this.batchReviewDialog.submitting = false
        }
      })
    },
    async confirmBatchDelete() {
      if (this.selectedTopics.length === 0) return
      try {
        await this.$confirm(`将删除选中的 ${this.selectedTopics.length} 条话题，是否继续？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }

      try {
        const ids = this.selectedTopics.map(item => item.topicId || item.id)
        await deleteTopics(ids)
        this.$message.success('删除成功')
        this.selectedTopics = []
        this.fetchList()
      } catch (e) {
        // 错误信息由统一请求处理
      }
    },
    async handleDeleteSingle(row) {
      const id = row.topicId || row.id
      if (!id) return
      try {
        await this.$confirm('此操作将永久删除该话题，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }

      try {
        await deleteTopics([id])
        this.$message.success('删除成功')
        this.fetchList()
      } catch (e) {
        // 错误由统一请求处理
      }
    },
    openConciseDialog(row) {
      this.conciseDialog = { visible: true, loading: false, topicId: row.topicId || row.id || '', content: '' }
    },
    async fetchConciseContent() {
      if (!this.conciseDialog.topicId) {
        this.$message.warning('未找到话题ID')
        return
      }
      try {
        this.conciseDialog.loading = true
        const res = await getTopicConciseContent(this.conciseDialog.topicId)
        if (res?.code === 1) {
          // 根据接口示例，精简内容在 msg 字段
          this.conciseDialog.content = res.msg || ''
          if (!this.conciseDialog.content) this.$message.info('暂无精简内容')
        }
      } catch (e) {
        console.error('获取精简内容失败:', e)
      } finally {
        this.conciseDialog.loading = false
      }
    },
    copyConcise() {
      if (!this.conciseDialog.content) {
        this.$message.info('无可复制的内容')
        return
      }
      const area = document.createElement('textarea')
      area.value = this.conciseDialog.content
      document.body.appendChild(area)
      area.select()
      try {
        document.execCommand('copy')
        this.$message.success('已复制到剪贴板')
      } catch (e) {
        this.$message.error('复制失败，请手动复制')
      } finally {
        document.body.removeChild(area)
      }
    },
    async submitStatus() {
      this.$refs.statusForm.validate(async (valid) => {
        if (!valid) return
        try {
          this.statusDialog.submitting = true
          const payload = {
            id: this.statusDialog.form.id,
            reviewMessage: this.statusDialog.form.reviewMessage,
            status: parseInt(this.statusDialog.form.status)
          }
          await updateTopicStatus(payload)
          this.$message.success('更新成功')
          this.statusDialog.visible = false
          this.fetchList()
        } catch (e) {
          // 错误消息已由request统一处理
        } finally {
          this.statusDialog.submitting = false
        }
      })
    },
    getStatusLabel(status) {
      const key = typeof status === 'number' ? String(status) : status
      return statusMap[key] || '未知'
    },
    getVisibilityLabel(visibility) {
      return visibilityMap[visibility] || '未知'
    },
    getCategoryLabel(categoryId) {
      const map = createCategoryMap(this.categoryList)
      return map[categoryId] || categoryId
    },
    formatContent(content) {
      if (!content) return ''
      let formattedContent = content
      formattedContent = formattedContent.replace(/!\[([^\]]*)\]\(([^)]+)\)/g,
        '<div class="markdown-image-link"><i class="el-icon-picture"></i> 图片链接: $1 <span class="image-url">$2</span></div>')
      formattedContent = formattedContent.replace(/^# (.+)$/gm, '<h1 class="markdown-h1">$1<\/h1>')
      formattedContent = formattedContent.replace(/^## (.+)$/gm, '<h2 class="markdown-h2">$1<\/h2>')
      formattedContent = formattedContent.replace(/^### (.+)$/gm, '<h3 class="markdown-h3">$1<\/h3>')
      formattedContent = formattedContent.replace(/^#### (.+)$/gm, '<h4 class="markdown-h4">$1<\/h4>')
      formattedContent = formattedContent.replace(/\*\*([^*]+)\*\*/g, '<strong class="markdown-bold">$1<\/strong>')
      formattedContent = formattedContent.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em class="markdown-italic">$1<\/em>')
      formattedContent = formattedContent.replace(/`([^`]+)`/g, '<code class="markdown-inline-code">$1<\/code>')
      formattedContent = formattedContent.replace(/```([\s\S]*?)```/g, '<pre class="markdown-code-block"><code>$1<\/code><\/pre>')
      formattedContent = formattedContent.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="markdown-link" target="_blank">$1<\/a>')
      formattedContent = formattedContent.replace(/^(?!<[h1-4]|<div|<pre|<ul|<ol)(.+)$/gm, function(match, p1) {
        if (match.includes('<') && (match.includes('h1') || match.includes('h2') || match.includes('h3') || match.includes('h4') ||
            match.includes('div') || match.includes('pre') || match.includes('ul') || match.includes('ol'))) {
          return match
        }
        return '<p class="markdown-paragraph">' + p1 + '<\/p>'
      })
      formattedContent = formattedContent.replace(/\n\n/g, '<br><br>')
      formattedContent = formattedContent.replace(/\n(?!<)/g, '<br>')
      return formattedContent
    },
    getStatusTagType,
    getVisibilityTagType,
    getCategoryTagType
  }
}
</script>

<style lang="scss" scoped>
.topic-management {
  padding: 20px;
}

.search-section {
  margin-bottom: 16px;
}

.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}

.action-buttons-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  > .el-button {
    min-width: auto;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
    min-height: 26px;
    align-self: stretch;
    margin-left: 0 !important; /* 覆盖 Element 默认 .el-button + .el-button 间距，避免网格内错位 */
    display: block;
  }
}

.topic-detail {
  .detail-header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      margin: 0;
      color: #303133;
      font-size: 22px;
      font-weight: 600;
    }
  }

  .detail-image {
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
  }

  .detail-info {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column-gap: 24px;
    grid-row-gap: 12px;
    .info-row {
      display: flex;
      align-items: center;
      min-height: 32px;
      .info-label {
        font-weight: 600;
        margin-right: 10px;
        color: #606266;
        min-width: 88px;
        text-align: right;
      }
      .info-value {
        color: #303133;
        word-break: break-all;
      }
    }
  }

  .detail-content {
    h3 {
      margin-bottom: 12px;
      color: #303133;
      font-weight: 600;
    }
    
    p {
      line-height: 1.8;
      color: #606266;
      white-space: pre-wrap;
    }

    .content-text {
      color: #303133;
      line-height: 1.8;
      font-size: 14px;
    }

    /* Markdown渲染样式 */
    .markdown-h1 { font-size: 22px; font-weight: 700; margin: 16px 0; }
    .markdown-h2 { font-size: 18px; font-weight: 700; margin: 14px 0; }
    .markdown-h3 { font-size: 16px; font-weight: 700; margin: 12px 0; }
    .markdown-h4 { font-size: 15px; font-weight: 600; margin: 10px 0; }
    .markdown-bold { font-weight: 700; }
    .markdown-italic { font-style: italic; }
    .markdown-inline-code {
      background: #f6f8fa;
      border: 1px solid #eee;
      border-radius: 3px;
      padding: 0 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    .markdown-code-block {
      background: #0f111a;
      color: #e6e6e6;
      padding: 12px;
      border-radius: 6px;
      overflow: auto;
      font-size: 13px;
    }
    .markdown-link { color: #409EFF; text-decoration: none; }
    .markdown-link:hover { text-decoration: underline; }
    .markdown-image-link {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      background: #f9fafc;
      border: 1px dashed #e4e7ed;
      border-radius: 6px;
      color: #606266;
    }
    .markdown-paragraph { margin: 8px 0; }
  }
}
</style>
